<template>
    <div class="dateBox">
        <el-date-picker
            v-model="createdate"
            type="date"
            popper-class="dateClass"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="changeValue"
            placeholder="选择日期">
        </el-date-picker>
    </div>
</template>
<script>
    export default{
        props:{
            date:{
                type:String,
                default:'',
            }
        },
        data(){
            return{
                createdate:'',
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '清除',
                            onClick(picker) {
                                picker.$emit('pick', '');
                            }
                        },
                        {
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }
                    ]
                },
            }
        },
        created(){
            // console.log(this.date,'this.datethis.date')
            // console.log(this.createdate,'this.createDatethis.createDate')
            this.createdate = this.date;
            console.log(this.createdate,'this.createDatethis.createDate')
        },
        methods:{
            changeValue(date){
                this.$emit('getData',date);
            },
        },
        watch:{
            date:{
                handler(val,old){
                    console.log(val,'---日期'); 
                    this.createdate = val;
                },
                immediate:true,
                deep:true,
            }
        }
    }
</script>
<style lang="scss" scoped>
    .dateBox{
        width: 100%;
        .el-date-editor.el-input{
            width: 100% !important;
        }
      
    }
</style>